<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <link type="text/css" href="xx.css" rel="stylesheet">
    <title>Title</title>
</head>

<body>
    <div class="height-box">
        <img src="https://img.naiveadmin.com/assets/avatar/avatar-2.jpg" alt="" title="">
    </div>
    <div class="shark-wrap card">
        <img src="https://imgservices-1252317822.image.myqcloud.com/coco/b11272023/ececa9a5.7y0amw.jpg">
    </div>
</body>

</html>

<style>
    .height-box {
        height: 120px;
        width: 300px;
        overflow: hidden;
        position: relative;
    }

    .height-box img {
        height: 100%;
        width: 100%;
    }

    /*添加白光*/
    .height-box:before {
        display: block;
        top: -200%;
        left: -100%;
        width: 50%;
        height: 300%;
        -webkit-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        -o-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        transform: rotate(45deg);
        background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.05));
        background: -ms-linear-gradient(left, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.05));
        background: -moz-linear-gradient(left, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.05));
        background: -o-linear-gradient(left, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.05));
        background: linear-gradient(left, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.05));
        z-index: 2;
        /*在最上层*/
        position: absolute;
        content: "";
    }

    .height-box:hover:before {
        /*鼠标移动到上面需要做的事情,由于是要白光动起来,所以这里设置动画*/
        -webkit-animation: crossed 5s linear;
        -ms-animation: crossed 5s linear;
        -moz-animation: crossed 5s linear;
        -o-animation: crossed 5s linear;
        animation: crossed 5s linear;
    }

    @-webkit-keyframes crossed {
        from {
            top: -200%;
            left: -100%;
        }

        to {
            top: -50px;
            left: 100%;
        }
    }

    @-o-keyframes crossed {
        from {
            top: -200%;
            left: -100%;
        }

        to {
            top: -50px;
            left: 100%;
        }
    }

    @-moz-keyframes crossed {
        from {
            top: -200%;
            left: -100%;
        }

        to {
            top: -50px;
            left: 100%;
        }
    }

    @-ms-keyframes crossed {
        from {
            top: -200%;
            left: -100%;
        }

        to {
            top: -50px;
            left: 100%;
        }
    }

    @keyframes crossed {
        from {
            top: -200%;
            left: -100%;
        }

        to {
            top: -50px;
            left: 100%;
        }
    }

    .card {
        width: 300px;
        border-radius: 8px;
        background-color: #FFE8A3;
    }

    .card img {
        display: block;
        width: 100%;
    }

    .shark-wrap::after {
        content: '';
        position: absolute;
        inset: -20%;
        background: linear-gradient(45deg, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0) 60%);
        animation: shark-wrap 2s infinite;
        transform: translateX(-100%);
    }

    @keyframes shark-wrap {
        to {
            transform: translateX(100%);
        }
    }
</style>